<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsf/composite/componentes"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui">
    
            <fieldset>
                <legend>Filtro</legend>
                <h:panelGrid columns="3">
                    <h:outputLabel value="#{i18n.musica_nome}"/>
                    <h:outputLabel value="#{i18n.musica_artista}"/>
                    <h:outputLabel value="#{i18n.musica_album}"/>
                    <h:inputText id="nome" value="#{consultarMusica.nome}" size="20"/>
                    <h:inputText id="artista" value="#{consultarMusica.artista}" size="20"/>
                    <h:inputText id="album" value="#{consultarMusica.album}" size="20"/>
                </h:panelGrid>
                <h:commandButton styleClass="commandButton" value="Consultar" action="#{consultarMusica.pesquisar}">
                    <f:ajax execute="nome artista album dataTable" render="dataTable primeiro anterior proximo ultimo pagina"/>
                </h:commandButton>
            </fieldset>

            <br/>
            
            <h:dataTable id="dataTable" value="#{consultarMusica.lista}" var="musica" styleClass="tabela" headerClass="cabecalho" rowClasses="ultimo,primeiro"  width="100%">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="#{i18n.musica_nome}"/>
                    </f:facet>
                    <h:outputText value="#{musica.nome}"/>
                </h:column>
                <h:column>
                    <h:commandLink id="commandLinkTeste" title="clique aqui para selecionar" onclick="dialogoConsultarMusica.hide()">
                        <f:ajax execute="commandLinkTeste" />
                        <h:graphicImage value="#{resource['img:selecionar.png']}" style="border: 0px;"/>
                        <f:setPropertyActionListener target="${alvo}" value="#{musica}"/>
                    </h:commandLink>
                </h:column>                
            </h:dataTable>

            <h:panelGrid columns="5" cellpadding="0" cellspacing="5" style="text-align:right">
                <h:commandLink id="primeiro" value="Primeiro" action="#{consultarMusica.primeira}" disabled="#{consultarMusica.primeiroRegistro == 0}">
                    <f:ajax execute="dataTable" render="dataTable primeiro anterior proximo ultimo pagina"/>
                </h:commandLink>
                <h:commandLink id="anterior" value="Anterior"  action="#{consultarMusica.anterior}" disabled="#{consultarMusica.primeiroRegistro == 0}">
                    <f:ajax render="dataTable primeiro anterior proximo ultimo pagina"/>
                </h:commandLink>
                <h:commandLink id="proximo" value="Próximo" action="#{consultarMusica.proxima}" disabled="#{consultarMusica.primeiroRegistro + consultarMusica.registrosPorPagina >= consultarMusica.totalRegistros}">
                    <f:ajax render="dataTable primeiro anterior proximo ultimo pagina"/>
                </h:commandLink>
                <h:commandLink id="ultimo" value="Último" action="#{consultarMusica.ultima}" disabled="#{consultarMusica.primeiroRegistro + consultarMusica.registrosPorPagina >= consultarMusica.totalRegistros}">
                    <f:ajax execute="dataTable" render="dataTable primeiro anterior proximo ultimo pagina"/>
                </h:commandLink>
                <h:outputText id="pagina" value="Page #{consultarMusica.paginaCorrente} / #{consultarMusica.totalPaginas}" />
            </h:panelGrid>
</ui:composition>